<template>
  <a-dialog v-if="value" :value="value" :padding="false" @input="$emit('input', $event)" title="管理所属专题">
    <!--<div class="border-bottom-1 q-pa-md text-center">-->
    <!--<q-btn to="/topic/create/" color="primary">建立专题</q-btn>-->
    <!--</div>-->
    <div v-if="mode === 'remove'" class="q-pa-md border-bottom-1">
      目前已经添加到如下专栏，如果你要添加到其他专栏，请先移除。
    </div>
    <div v-if="mode === 'add'" class="q-pa-md border-bottom-1">
      <div v-if="querySet && querySet.length > 0">你可以选择将它添加到以下专栏：</div>
      <div v-else="">目前你还没有创建任何专栏，你可以点击按钮<q-btn class="q-ml-sm" color="primary" to="/topic/create/">创建专题</q-btn></div>
    </div>
    <a-table
      :data="querySet"
      :columns="columns"
      :loading="loading"
      :shadow="false"
      :head="false"
      :changeRoute="false"
      @page="page=$event"
      :page="page"
      :max="max">
      <div slot="action"  slot-scope="props">
        <q-btn v-if="mode === 'remove'" color="red-1" text-color="negative" @click="removeTopic(props.instance)">移除</q-btn>
        <q-btn v-if="mode === 'add'" color="blue-1" text-color="primary" @click="addTopic(props.instance)">添加</q-btn>
      </div>
    </a-table>
  </a-dialog>
</template>

<script>
  import {querySetBaseMixin} from '../../mixins'

  export default {
    name: 'aSetTopicDialog',
    mixins: [querySetBaseMixin],
    props: {
      value: {
        required: true
      },
      model: {
        type: String,
        required: false
      }
    },
    data() {
      return {
        api: '/api/user/{id}/topic/',
        mode: '',
        loading: false,
        count: 0,
        querySet: [],
        page: 1,
        columns: [
          {
            label: '名称',
            field: 'title',
            link: {
              target: '_blank',
              url: (instance) => {
                const id = instance.id

                return `/topic/${id}/`
              }
            }
          }
        ]
      }
    },
    computed: {
      max() {
        return Math.ceil(this.count / (this.limit))
      },
      queryParams() {
        if (this.page) {
          return {page: this.page}
        } else {
          return {}
        }
      },
      id() {
        return this.auth.id
      }
    },
    created() {
      this.getAddedTopic()
      // this.query()
    },
    watch: {
      page() {
        this.query()
      }
    },
    methods: {
      async getAddedTopic() {
        const model = this.model
        const {status, data} = await this.getRequest({
          api: `/api/${model}/{id}/topics/`,
          id: this.value
        })

        if (status === 200) {
          if (data.results.length === 0){
            this.mode = 'add'
            this.query()
          } else {
            this.mode = 'remove'
            this.querySet = data.results
          }
        } else {
          this.notify('error', '无法获取专题状态')
        }
      },
      async addTopic(instance) {
        const {status} = await this.postRequest({
          api: '/api/topic/{id}/add_resources/',
          id: instance.id,
          data: {
            resources: [[this.value, this.model]]
          }
        })

        if (status === 200) {
          this.notify('success', '成功添加到专题')
        } else {
          this.notify('error', '添加失败，请重试')
        }


        this.$emit('input', null)
      },
      async removeTopic(instance) {
        const {status} = await this.postRequest({
          api: '/api/topic/{id}/remove_resource/',
          id: instance.id,
          data: {
            model: this.model,
            pk: this.value
          }
        })

        if (status === 200) {
          const row = this.getInstanceRow(instance.id)
          this.$delete(this.querySet, row)
          this.notify('success', '成功移除专题内容')
          this.$emit('input', null)
        } else {
          this.notify('error', '移除专题内容失败，请稍后重试')
        }
      }
    }
  }
</script>
